<template>
    <div id="root">
        <Headers />

        <div class="container mt-3 col-sm-12 col-xl-8">
            <div class="mt-2 mb-2">
                <button id="reflash" class="btn btn-outline-dark" @click="reflashData">刷新</button>
                <button id="addBill" class="btn mx-2" :class="showAddBillForm ? 'btn-dark' : 'btn-outline-dark'"
                    @click="showAddBillForm = !showAddBillForm">添加账单</button>
            </div>
            <transition name="expand-collapse">
                <AddForm :showAddBillForm="showAddBillForm" @addBillSuccess="addBillSuccess" />
            </transition>

            <BillTable :srcBillList="billList" @delete-bill="deleteBill" @edit-bill="editBill" />

        </div>
        <!-- <EditWindow v-model="editingBill"/> -->
    </div>
</template>

<script>
    import Bill from '@/models/Bill';
    import Headers from '../components/Headers.vue';
    import AddForm from '../components/AddForm.vue';
    import BillTable from '../components/BillTable.vue';

    export default {
        name: 'Layout',
        components: {
            Headers,
            AddForm,
            BillTable,
        },
        data() {
            return {
                editingBillBackup: null,
                showAddBillForm: false,
                username: '',
                billList: [],
            };
        },
        methods: {
            retractFilterBox() {
                setTimeout(() => {
                    this.showFilterCheckBox = false;
                }, 200);
            },
            loadData() {
                console.log('load Data');

                // 异步发送请求, 响应账单列表
                this.$axios.get('/data/selectAll')
                    .then(response => {
                        if (response.data.status === 200) {

                            // console.log(response.data.data);
                            this.billList = response.data.data.map(bill => new Bill(bill));
                            // console.log(this.billList);
                        }
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                    });
            },
            reflashData() {
                this.loadData();
            },
            addBillSuccess(formData) {
                this.showAddBillForm = false;
                var bill = new Bill(formData);
                this.billList.push(bill);
                formData = null;
            },
            deleteBill(idList) {
                console.log(idList);

                // 在内存中删除账单, 无需重新请求数据
                this.billList = this.billList.filter(bill => !idList.includes(bill.id));

                // 异步发送请求， 删除账单
                this.$axios.post('/data/deleteBills', { id: idList })
                    .then(response => {
                        if (response.data.status === 200) {
                            console.log('删除成功');
                        } else {
                            console.log('删除失败');
                        }
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                    });
            },
            editBill(bill) {
                this.$axios.post('/data/updateBill', bill)
                    .then(response => {
                        if (response.data.status === 200) {
                            console.log('数据同步成功');
                        } else {
                            console.log('同步失败');
                        }
                    })
            }
        },
        computed: {

        },
        created() {
        },
        mounted() {
            this.loadData();
        },
    };
</script>

<style scoped>

    .expand-collapse-enter-active,
    .expand-collapse-leave-active {
        transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
        overflow: hidden;
    }

    .expand-collapse-enter,
    .expand-collapse-leave-to {
        max-height: 0;
        opacity: 1;
    }

    .expand-collapse-enter-to,
    .expand-collapse-leave {
        max-height: 400px;
        opacity: 1;
    }

    #statement {
        max-height: 140px;
    }

    #notes {
        max-height: 180px;
    }

</style>